<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        #if(C.get('language')=='en')
            Search Engines
        #else
            搜索引擎
        #end
    </title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
        <style>
        .search-highlight{
            color: red;
        }
    </style>
</head>
<body>
<div style="margin-top: 30px;">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <img style="padding-bottom: 2px;" src="images/logo.png"/>
                    <div class="layui-inline">
                        #if(C.get('language')=='en')
                            <input id="keyword" style="margin-left: 20px;" type="text" placeholder="Please enter keywords" class="layui-input" value="#(keyword ??)">
                        #else
                            <input id="keyword" style="margin-left: 20px;" type="text" placeholder="请输入关键字" class="layui-input" value="#(keyword ??)">
                        #end
                    </div>
                    <div class="layui-inline">
                        <button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary" onclick="search();">
                            #if(C.get('language')=='en')
                                &nbsp;&nbsp;search&nbsp;&nbsp;
                            #else
                                &nbsp;&nbsp;搜索&nbsp;&nbsp;
                            #end
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12" style="margin-bottom: 20px;">
                <div style="background-color: #f8f8f8;padding-top: 5px;padding-bottom: 5px;padding-left: 5px;padding-right: 5px;">
                    #if(C.get('language')=='en')
                        <a  href="/index_en" style="margin-left: 10px;margin-right: 10px;">home</a>
                    #else
                        <a  href="/" style="margin-left: 10px;margin-right: 10px;">首页</a>
                    #end
                    <a  href="javascript:goNew();" style="margin-left: 10px;margin-right: 10px;">
                        #if(C.get('language')=='en')
                            news
                        #else
                            新闻
                        #end
                    </a>
                    <a href="javascript:goPrudoct();" style="margin-left: 10px;margin-right: 10px;color:#FF9400;">
                        #if(C.get('language')=='en')
                            commodity
                        #else
                            商品
                        #end
                    </a>
                </div>
            </div>
            <div class="layui-col-md12">
                #if(keyword)
                #productSearchPage(keyword=keyword)
                
                #for(entity:productPage.list)
                <div style="text-align: left;max-width:560px;padding-bottom: 10px;" >
                    <div style="margin-bottom: 5px;">
                        <a href="/productdetail?productid=#(entity.id ??)" style="color: #00e;font-size: 120%">
                            #if(entity.highlightTitle)
                            #(entity.highlightTitle ??)
                            #else
                            #maxLength(entity.title,40,'...')
                            #end
                        </a>
                    </div>
                    <!--<span style="color: #9F9F9F;" ></span>-->
                    <span>
                        
                        #if(entity.highlightContent)
                        #maxLength(entity.highlightContent,100,'...')
                        #else
                        #maxLength(entity.text,100,'...')
                        #end
                        
                    </span>
                    <div style="font-size:90%;">
                        <a href="#(entity.url ??)" style="color: #008000">
                            #if(C.get('language')=='en')
                                details
                            #else
                                详情
                            #end
                        </a>
                        
                        <!--<span style="position: relative;left: 10%"><a href="#" style="color: #9F9F9F"><span>快照</span></a></span>-->
                    </div>
                </div>
                #end
                #end
                #end
            </div>
            <div class="layui-col-md12">
                <div id="pages"></div>
            </div>
        </div>
    </div>
</div>
<script>
    
    function goNew(){
        var keyword = $("#keyword").val();
        
        if(keyword==""){
            location.href="/article/search?language=#(C.get('language'))";
            return;
        }
        
        var page = 1;
        location.href="/article/search?keyword="+keyword+"&page="+page+"&language=#(C.get('language'))";
    }
    
    function goPrudoct(){
        var keyword = $("#keyword").val();
        
        if(keyword==""){
            location.href="/product/search?language=#(C.get('language'))";
            return;
        }
        
        var page = 1;
        location.href="/product/search?keyword="+keyword+"&page="+page+"&language=#(C.get('language'))";
    }
    
    function search(){
        var keyword = $("#keyword").val();
        
        if(keyword==""){
            return;
        }
        
        var page = 1;
        location.href="/product/search?keyword="+keyword+"&page="+page+"&language=#(C.get('language'))";
    }
    
    function page(page){
        var keyword = $("#keyword").val();
        location.href="/product/search?keyword="+keyword+"&page="+page+"&language=#(C.get('language'))";
    }

    layui.use('laypage', function(){
      var laypage = layui.laypage;
      laypage.render({
        elem: 'pages'
        ,prev:#if(C.get('language')=='en') "previous page" #else "上一页" #end
        ,next:#if(C.get('language')=='en') "next page" #else "下一页" #end
        ,count: #if(keyword)#productSearchPage(keyword=keyword) #(productPage.totalRow) #end #else 0 #end
        ,curr:  #(page)
        ,jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据
            //首次不执行
            if(!first){
              page(obj.curr);
            }
          }
      });
    });

</script>
</body>
</html>